<template>
  <div class="layout-aside-container">
    <!-- 使用 Element Plus 的菜单组件 -->
    <el-menu
      default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleSelect">
      <el-menu-item index="1">
        <router-link to="/home/user">用户管理</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/home/rights">权限管理</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/home/goods">商品管理</router-link>
      </el-menu-item>
      <el-menu-item index="4">
        <router-link to="/home/orders">订单管理</router-link>
      </el-menu-item>
      <el-menu-item index="5">
        <router-link to="/home/settings">系统设置</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 获取路由实例
const router = useRouter();

// 监听当前路由变化来更新菜单高亮
const activeIndex = ref(router.currentRoute.value.path.replace('/home/', ''));

watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    activeIndex.value = newPath.replace('/home/', '');
  },
  { immediate: true }
);

// 处理菜单选择事件（可选）
const handleSelect = (key, keyPath) => {
  console.log('selected menu:', key, keyPath);
};
</script>

<style scoped>
.layout-aside-container {
  width: 250px;
  height: 100%;
  border-right: 1px solid #eaeaea;
}

.el-menu-vertical-demo {
  background-color: #fff;
  border-right: none;
}

.el-menu-item {
  line-height: 50px;
  font-weight: bold;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.el-menu-item a {
  color: #333;
  padding-left: 30px;
}

.el-menu-item:hover {
  background-color: #efefef;
}

/* 设置路由高亮效果 */
.router-link-active {
  box-sizing: border-box;
  position: relative;
  /* 伪元素实现路由高亮效果 */
  &::before {
    content: ' ';
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}

</style>